<template>
	<view class="vote-situation-view">
		<Navbar title="投票情况" :leftIconColor="'#3b65a5'" />
		<view class="situation-box">
			<view class="situation-title">
				投票情况
			</view>
			<z-paging class="situation-list-box" :fixed="false" ref="paging" v-model="dataList" @query="queryList">
				<view class="situation-nav" slot="top">
					<u-tabs :list="navList" :current="tabsIndex" itemStyle="height: 44px; flex: 1;" lineWidth="100rpx"
						lineColor="#3A64A5" activeStyle="color: #3A64A5; font-size: 32rpx; font-weight: bold"
						inactiveStyle="font-size:32rpx; color: #333333;" @click="onTabs"></u-tabs>
				</view>
				<view class="situation-list">
					<view class="situation-item" v-for="(item, index) in dataList" :key="index">
						<view class="situation-item-title flex-box-space-between">
							<view class="situation-item-title-content flex-box-center-y">
								<view class="situation-item-title-num">
									<view class="situation-item-title-num-text">{{item.orderNum || ''}}号</view>
								</view>
								<view style="width:460rpx;font-weight: bold; flex: 1;">
									{{item.workName || ''}}
								</view>
							</view>

							<view style="color:#fe8522;font-size: 28rpx;">
								{{item.totalVoteNum || 0}}票
							</view>
						</view>
						<view class="situation-group">
							参赛队伍：{{item.partTeam || ''}}
						</view>
					</view>
				</view>
			</z-paging>
		</view>
		<u-popup :show="tipsShow" @close="tipsClose" mode="center" closeOnClickOverlay round="12rpx"
			:safeAreaInsetBottom='false'>
			<view class="tips-popup-box">
				<view class="tips-popup-title">
					{{tipsTitle}}
				</view>
				<view class="tips-popup-content">
					{{msg}}
				</view>
				<view class="tips-popup-btn" @click="tipsClose">
					好的
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getWorkRankList
	} from "@/api/vote/vote.js"
	export default {
		data() {
			return {
				dataList: [],
				tabsIndex: 0,
				activityIdTap: '',
				type: 'szgy',
				navList: [{
					name: '数字文化',
					type: 'szwh'
				}, {
					name: '数字人居',
					type: 'szrj'
				}, {
					name: '数字工业',
					type: 'szgy'
				}, {
					name: '元宇宙',
					type: 'yyz'
				}],
				total: -1,
				tipsShow: false,
				msg: '',
				tipsTitle: ''
			}
		},
		onLoad() {
			this.tabsIndex = +this.$Route.query.tabsIndex
			this.activityIdTap = this.$Route.query.activityIdTap
			this.type = this.navList[this.tabsIndex || 0].type
			if (this.$Route.query.isSuccess == 'success') {
				this.tipsShow = true
				this.msg = this.$Route.query.msg
				this.tipsTitle = '投票成功'
			}
		},
		onShareAppMessage() {
			return {
				title: '长沙学院第三届“月湖杯”3D大赛网络投票开始啦~',
				path: '/pages/home?isVote=vote',
				imageUrl: 'https://xnlv.lizxx.com/image/xnlv/static/sharin.png'
			}
		},
		onShareTimeline() {
			return {
				title: '长沙学院第三届“月湖杯”3D大赛网络投票开始啦~',
			};
		},
		methods: {
			queryList(pageNo, pageSize) {
				getWorkRankList({
					pageSize: 99,
					pageNum: pageNo,
					workClassify: this.type,
					activityId: this.activityIdTap
				}).then((res) => {
					this.total = res.total
					this.$refs.paging.setLocalPaging(res.rows);
				})
			},
			onTabs(e) {
				if (this.tabsIndex == e.index) return
				this.tabsIndex = e.index
				this.type = e.type
				this.pageNum = 1
				this.$refs.paging.reload()
			},
			tipsClose() {
				this.tipsShow = false
			},
			goToUrl(urlName, params = {}) {
				this.$Router.push({
					name: urlName,
					params
				})
			}
		}
	}
</script>

<style lang="scss">
	/deep/ .u-tabs__wrapper__nav__item {
		flex: 1 !important;
	}

	/deep/ .z-paging-content {
		flex: 1;
	}

	.vote-situation-view {
		display: flex;
		flex-direction: column;
		background-color: #e8f1fe;
		min-height: 100vh;
	}

	.situation-box {
		display: flex;
		flex-direction: column;
		height: 88vh;
		margin: 16rpx 18rpx 40rpx;
		background: #fff;
		border-radius: 12rpx;
		box-sizing: border-box;
	}

	.situation-title {
		font-weight: bold;
		font-size: 32rpx;
		color: #3A64A5;
		text-align: center;
		margin-top: 38rpx;
	}

	.situation-nav {
		margin-top: 16rpx;
		padding-bottom: 20rpx;
	}

	.situation-list-box {
		padding: 0 0 20rpx;
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.situation-list {
		padding: 10rpx 28rpx;
		flex: 1;
	}

	.situation-item {
		padding-bottom: 20rpx;
		margin-bottom: 20rpx;
		border-bottom: 2rpx solid #EFEFEF;

		.situation-item-title {
			font-size: 30rpx;
			color: #3A64A5;
			// font-weight: bold;

			.situation-item-title-content {
				display: flex;
				justify-content: center;
				align-items: center;

				.situation-item-title-num {
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: rgba(245, 186, 15, 0.19);
					width: 102rpx;
					height: 50rpx;
					border-radius: 10%;
					text-align: center;
					margin-right: 10px;

					.situation-item-title-num-text {
						color: #F5BA0F;
						font-size: 28rpx;
						font-weight: bold;
					}
				}
			}
		}

		.situation-group {
			font-size: 24rpx;
			color: #666666;
			margin-top: 20rpx;
		}
	}

	/deep/ .zp-l-text-rpx {
		font-size: 26rpx !important;
	}



	.tips-popup-box {
		width: 664rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		box-sizing: border-box;
		padding-top: 72rpx;

		.tips-popup-title {
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
			text-align: center;
		}

		.tips-popup-content {
			font-size: 30rpx;
			color: #999999;
			padding: 28rpx 46rpx 42rpx;
			border-bottom: 2rpx solid #F1F1F1;
			text-align: center;
		}

		.tips-popup-btn {
			text-align: center;
			line-height: 100rpx;
			width: 100%;
			height: 100rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #3A64A5;
		}
	}
</style>